<template>
	<view class="search">
		<view class="search-input">
			<view class="search-flex">
				<input class="search-input_input" type="text" @input="changeInput" v-model="searchCon" confirm-type="搜索" placeholder-class="place" placeholder="儿童加绒外套49.9" />
				<i class="icon error_icon" v-if="searchCon" @tap="clear"> &#xe66f; </i>
			</view>
			<text @tap="searchnav(searchCon)" class="search-close">搜索</text>
		</view>
		<scroll-view scroll-y="true" class="search-content">
			<view class="search-list" v-if="searchCon">
				<view class="search-list_text" v-for="(item,index) in searchInputList" :key="index" @tap="searchnav(item)">
					<!-- <text v-if="item.index == 14">实打实打扫打扫打扫的1</text> -->
					<text>{{item}}</text>
				</view>
			</view>
			<view v-else>
				<view class="search-list_all">
					<view class="search-list_history">
						<view class="search-list_img">
							<image :src="Url+'index/ic-s_date.png'"></image>
							<text>历史搜索</text>
						</view>
						<image class="search-list_del" mode="widthFix" :src="Url+'index/ic-del.png'"></image>
					</view>
					<view class="search-list_array">
						<text v-for="(item,index) in searchList" :key="index" @tap="searchnav(item.content)">{{item.content}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {search,searchInput} from '@/common/index.js';
	export default {
		data() {
			return {
				searchCon:'',
				searchSta:1,
				Url:this.Imgurl,
				searchList:[],
				searchInputList:[]
			};
		},
		created() {
			this.search()
		},
		methods:{
			//跳转搜索页
			searchnav(item){
				uni.navigateTo({
					url:"/pageD/searchList/searchList?name="+item
				})
			},
			//历史搜索信息
			search(){
				search().then(res=>{
					if(res.code == 1){
						this.searchList = res.msg;
					}
				}).catch()
			},
			changeInput(){
				searchInput({name:this.searchCon}).then(res=>{
					if(res.code == 1){
						this.searchInputList = res.msg;
						this.searchSta = 2
					}
				}).catch()
			},
			clear(){
				this.searchCon = '';
				this.searchSta = 1;
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="less">
	.search{
		&-list_array{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20upx;
			text{
				padding: 17upx 40upx;
				background-color: #F9F9F9;
				text-align: center;
				box-sizing: border-box;
				border-radius: 40upx;
				font-size: 26upx;
				color: #333333;
				margin-top: 20upx;
				margin-bottom: 20upx;
				margin-right: 20upx;
			}
		}
		&-list_del{
			width:30upx;
			height: 30upx;
		}
		&-list_img{
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: #999999;
			image{
				width: 30upx;
				height: 30upx;
				display: block;
				margin-right: 10upx;
			}
		}
		&-list_all{
			margin:20upx 0;
			padding: 0 30upx;
			box-sizing: border-box;
		}
		&-list_history{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&-list{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
		}
		&-list_text{
			font-size: 26upx;
			color: #999999;
			padding: 24upx 0;
			border-bottom: 2upx solid #F9F9F9;
			box-sizing: border-box;
		}
		&-content{
			position: relative;
			height: calc(100vh - 100px);
		}
		&-input{
			display: flex;
			align-items: center;
			padding: 0 30upx;
			justify-content: space-between;
		}
		&-close{
			font-size: 30upx;
			color: #666666;
		}
		&-input_input{
			font-size: 28upx;
			color: #333333;
			width: 80%;
		}
		&-flex{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20upx 0;
			padding: 0 30upx;
			width:80%;
			height:60upx;
			background:rgba(249,249,249,1);
			border-radius:30upx;
		}
		.error_icon{
			color: #D1D1D1;
		}
	}
</style>
